<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">食品安全知识详情</small>
      </a>
    </header>
    <main>
        <div class="notedetail">
        <div class="article-title">
          <h2>{{this.Detail.title}}</h2>
        </div>
        <span>
           <i class="el-icon-time"></i><span class="rn-domainTime">{{this.Detail.createDate}}</span> 
        </span>
        <img :src="this.Detail.newsPicture.serverFullPath" v-if="this.Detail.newsPicture!=null">
        <article v-html="this.Detail.contentStr">
        </article>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
    import {
      ConsumerTipsByUnid
    } from '../../api/api';
  export default {
    data() {
      return {
       Detail:{},
      };
    },
    methods: {
      goback(){
       window.history.back()
      },
       Notedetail() {
                let options = {
                    params: {
                        unid:this.$route.query.unid,
                    }
                }
                //调取接口
                ConsumerTipsByUnid(options).then((res) => {
                    if (res.success === true) {
                        this.Detail= res.data
                    }
                })
            },
    },
    //页面加载时候
    created() {
      this.Notedetail()
    
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .notedetail{
  padding:0px 10px;
  .article-title{
    h2{
      color: #333
    }
  }
  span{
        color: #999;
    i{ 
      vertical-align:text-bottom;
      margin-right:5px;
    }
  }
  article{
    margin-top: 10px;
    text-indent: 2rem;
    line-height: 1.5rem;
    font-size: 1rem;
  }
}
</style>
